import React from 'react';
import { Card, Flex, Button, Space } from 'antd';
import ShowMoreAnalysis from './showMoreAnalysis';

interface Props {
    title: string;
    value: number;
    periodPercent: string;
    periodValue: string;
    date: string;
    roundPercent: string; 
    roundValue: string;
}

const VisYmCard: React.FC<Props> = ({ data }) => {
  const roundList = JSON.parse(data.data)
  if (!data.data || !roundList.length) return null;

  return (
    <div className={`space-y-4`}>
      {roundList.map((item, index) => (
        <Card 
          key={index}
          className="rounded-lg shadow-sm hover:shadow-md transition-shadow"
          bodyStyle={{ padding: '20px' }}      
        >
          <div className="space-y-4">
            <div className="text-lg font-medium mb-2">
                {item.title}
            </div>
            <Flex justify='space-between'>
              <div>
                <div className="text-3xl font-bold">
                  {item.value ?? 0}
                </div>
                <div className="text-gray-400 text-sm mt-2">
                  日期：{item.date}
                </div>
              </div>

              <div className='flex' style={{flexFlow:'column'}}>
                <Space align='end'>
                  <Button size='small' type='primary' className="bg-indigo-500">同比</Button>
                  <span className='font-bold text-xl ml-5 mr-5'>
                    {item.periodValue > 0 ? '+' : ''}
                    {item.periodValue ?? 0}
                  </span>
                  <span className={parseFloat(item.periodPercent) < 0 ? 'text-green-500' : 'text-red-500'}>
                    { parseFloat(item.periodPercent) > 0 ? '+' : '' }
                    { parseFloat(item.periodPercent) ?? 0}% 
                    { parseFloat(item.periodPercent) < 0 ? '↓' : '↑'}
                  </span>
                </Space>
                <Space align='end'>
                  <Button size='small' type='primary' className="bg-indigo-500">环比</Button>
                  <span className='font-bold text-xl ml-5 mr-5'>
                    { item.roundValue > 0 ? '+' : '' }
                    { item.roundValue ?? 0 }
                  </span>
                  <span className={ parseFloat(item.roundPercent) < 0 ? 'text-green-500' : 'text-red-500'}>
                    { parseFloat(item.roundPercent) > 0 ? '+' : '' }
                    { parseFloat(item.roundPercent) ?? 0}% 
                    { parseFloat(item.roundPercent) < 0 ? '↓' : '↑' }
                  </span>
                </Space>
              </div>
            </Flex>
           

            {/* 更多分析按钮 */}
            <div className="flex justify-end">
              <ShowMoreAnalysis type={'mom'} data={data} />
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
};

export default VisYmCard;